<template>
   
<div>
<el-form ref="form"  label-width="200px">
   <template v-if="  sheetType=='RESOURCE'   ">
    <el-form-item label="Resource Type"  >
    <el-input :value="resourceType" :readonly="true"></el-input>
	</el-form-item>
   </template>	
<template   v-for="(item, index) in settings">
  <el-form-item :label="item.name"  :required="item.required=='true'">
    <template v-if="  item.type=='text'   ">
    <el-input v-model="settingsContent[index]"></el-input>
	</template>
	<template v-if="  item.type=='password'   ">
    <el-input type="password" v-model="settingsContent[index]"></el-input>
	</template>
	<template v-if="  item.type=='integer'  || item.type=='long'   ">
    <el-input-number v-model="settingsContent[index]"></el-input-number>
	</template>
	<template v-if="  item.type=='boolean'   ">
    <el-checkbox   v-model="settingsContent[index]" ></el-checkbox>
	</template>
	<template v-if="  item.type=='choice'   ">
     <el-select v-model="settingsContent[index]"  placeholder="请选择">
        <el-option
      v-for="choice in item.choices"
      :label="choice"
      :value="choice">
         </el-option>
      </el-select>
	</template>
	
  </el-form-item>
</template>  




</el-form>
</div>
</template>

<script>
    import {ConfigurationService} from '../apis/ConfigurationService.js';
	import Vue from 'vue';
	import 'element-ui/lib/theme-default/form.css';
	import 'element-ui/lib/theme-default/input.css';
	import 'element-ui/lib/theme-default/input-number.css';
	import 'element-ui/lib/theme-default/form-item.css';
	import 'element-ui/lib/theme-default/checkbox.css';
	import 'element-ui/lib/theme-default/option.css';
	import 'element-ui/lib/theme-default/select.css';
    import {Form,FormItem,Input,InputNumber,Checkbox,Select ,Option } from 'element-ui'
	Vue.component(Form.name, Form)
	Vue.component(FormItem.name, FormItem)
	Vue.component(Input.name, Input)
	Vue.component(InputNumber.name, InputNumber)
	Vue.component(Checkbox.name, Checkbox)
	Vue.component(Select.name, Select)
	Vue.component(Option.name, Option)
    export default {
        data () {
            return {
				sheetId : null,
				sheetType : null,
				
				settings :[],
				settingsContent :[],
				resourceType: null,
				loading:true
            }
        },
		watch:{
			settingsContent(newValue, oldValue){
				
				var me=this;
				if(!this.loading){
				   var dataForSave =[];
				   this.settings.forEach((v,i)=>{
					   dataForSave.push({
						   ResourceId : me.sheetId,
						   Name :v.id,
						   Value : me.settingsContent[i].toString()
					   });
				   });
				
				  ConfigurationService.SaveResourceSettings(dataForSave)
				}
			}
		},
		components:{},
        mounted() {
			 this.sheetId =this.$vnode.data.attrs.sheetId;
			 this.sheetType =this.$vnode.data.attrs.sheetType;
			 var  me=this ;
			 me.settingsContent=[];
			 if(this.sheetType =='RESOURCE'){
				if( this.sheetId  &&  this.sheetId !=''){
					this.refreshResourceProertySheetByResourceId(this.sheetId)
				}
				 
			 }
        }
		,methods:{

              //根据资源ID 刷新属性页
            refreshResourceProertySheetByResourceId(resourceId ){
				   var me=this ;
				   ConfigurationService.FindResource(resourceId).then(
                         resource =>{
							  this.resourceType =resource.Type
							  me.initResourcePropertySheetByResourceType(resource.Type,me.setResourceSettings)
							  
							   
                         }
                 );
			},
			//根据资源类型初始化资源属性页
			initResourcePropertySheetByResourceType(resourceType,callback){
				  var me=this ;
				  ConfigurationService.FindResourceDefinition(resourceType).then(
								
								    defin =>{
										me.settings= defin.settings.slice(1)
										
										
										me.settings.forEach(s=>{
											
										 if(s.type!='boolean'){	
											if(!s.defaultValue){
												s.defaultValue="";
											}
										  }
										 else{
											 if(s.defaultValue ==undefined){
												 s.defaultValue =false;
											 }
											 if(s.defaultValue=='false'){
											   s.defaultValue =false	
											 }
											if(s.defaultValue=='true'){
											   s.defaultValue =true	
											 }
										 }
										 me.settingsContent.push(s.defaultValue)
										})
										if(callback){
									    	callback();
										}
										else{
											me.loading=false;
										}
									}
				);
			},
			//设置属性值
			setResourceSettings(){
				var me =this ;
				ConfigurationService.FindResourceSettting(this.sheetId).then(
					writeSettings=>{
						var writeSettingsMap ={};
						writeSettings.forEach((v,i)=>{
							writeSettingsMap[v.Name]=v.Value;
						});
						
						
						me.settings.forEach((v,i)=>{
							 
							 if(v.type!='boolean'){	
							   if(writeSettingsMap[v.id]){
								 //console.log(i,writeSettingsMap[v.id])
							     //me.settingsContent[i]=writeSettingsMap[v.id]
								 me.$set(me.settingsContent,i ,writeSettingsMap[v.id])
							   }
							 }
							 else{
							  if(writeSettingsMap[v.id]){	
							     //console.log(i,writeSettingsMap[v.id])
								 var b=writeSettingsMap[v.id];
								 if(b ==undefined){
									b =false;
								 }
								 if(b=='false'){
									b=false	
								 }
								 if(b=='true'){
									b =true	
								 }
								 me.$set(me.settingsContent,i ,b)
							   }
							 }
						});
						//console.log(me.settingsContent)
						//console.log(me.loading)
						me.loading=false;
					}
				);
				
			}
           

		}
    }
</script>

<style>


</style>